<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import naive from "naive-ui";
import { getLogin } from "@/api/index.js";
import { useCookies } from "vue3-cookies";

// 引入组件库的少量全局样式变量
import "tdesign-mobile-vue/es/style/index.css";
const router = useRouter();
const route = useRoute();
const { cookies } = useCookies();
let cachePage = [];
const routeList = router.options.routes;
routeList.map((item) => {
  if (!!item.meta.keepAlive) {
    cachePage.push(item.name);
  }
});
onMounted(async () => {
  const res = await getLogin();
  if (res.code === 0) {
    // 获取token，存储在cookie中
    const token = res.token;
    if (!cookies.get("token")) {
      cookies.set("token", token);
    }
  }
});
</script>

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <router-link to="/">首页</router-link> -->
  <div>
    <RouterView v-slot="{ Component, route }">
      <keep-alive :include="cachePage">
        <component :is="Component" :key="route.name" />
      </keep-alive>
    </RouterView>
  </div>
</template>

<style lang="scss">
@font-face {
  font-family: "opposans";
  src: url("@/assets/opposans-font/OPlusSans3-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
#app {
  font-family: "opposans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  /* margin-top: 60px; */
  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    padding: 0;
    margin: 0;
  }
}
body {
  padding: 0 !important;
  margin: 0 !important;
}
.t-swiper-nav__dots {
  display: none !important;
}
.content {
  padding-top: 0 !important;
}
.t-dialog__content {
  background-image: url("@/assets/header.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 22% !important; /* 覆盖整个对话框 */
  background-position: 0 -4px;
  padding: 0 !important;
}
.t-dialog__footer {
  padding: 0 !important;
  padding-bottom: 30px !important;
}
.t-overlay-enter-from,
.t-overlay-leave-to {
  opacity: 1 !important;
}
.t-form__controls {
  margin-left: 0 !important;
}
.t-form .t-form__item:not(:last-child)::after {
  border: none !important;
}
.t-input--border::after {
  height: 0 !important;
}
.t-form .t-form__item {
  padding: 16px 0 !important;
}
/* 关键：隐藏 TDesign 自带的密码切换图标 */
::v-deep .t-input__suffix-inner {
  /* 排除自定义的 suffix 插槽内容（你的图标），只隐藏默认图标 */
}
.t-input__wrap--suffix-icon {
  display: none !important; /* 隐藏默认的眼睛图标 */
}
.search .t-search__input-box .t-icon {
  font-size: 20px !important;
}

.search .t-search__input-box t-search__input-box--round {
  background: rgb(238, 230, 217) !important;
  border-color: transparent !important;
  font-size: 16px !important;
}

.search .t-search__input-box {
  border: none !important;
  height: 34px !important;
}
.detbox .t-navbar__content {
  background: transparent !important;
  color: #fff;
}
.control-box {
  .t-slider__line {
    background-color: #f1b444 !important;
  }
  .t-slider__dot {
    width: 28px !important;
    height: 28px !important;
  }
}
.brightness-control {
  .t-slider__line {
    background-color: #f1b444 !important;
  }
  .t-slider__dot {
    width: 28px !important;
    height: 28px !important;
  }
}
.t-cell::after {
  left: 0 !important;
}
</style>
